<template>
  <f7-input
    type="text"
    class="f7-picker"
    :placeholder="placeholder"
    :name="name"
    readonly
    :required="required"
  ></f7-input>
</template>
<script>
export default {
  props: {
    options: Array,
    params: null,
    placeholder: String,
    name: String,
    optionKey: {
      type: String,
      default: "key"
    },
    optionValue: {
      type: String,
      default: "value"
    },
    value: [String, Number, Array],
    displayValue: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lastValue: null
    };
  },
  watch: {
    value: function(val, old) {
      this.picker.setValue(this.$util.buildArray(val));
    }
  },
  methods: {
    validatePicker($el = this.$el) {
      let $pels = this.$$($el).find(".f7-picker input[required]");
      if ($pels && $pels.length > 0) {
        this.$util.each($pels, t => {
          const inst = t.f7Picker;
          const $inputEl = this.$$(t);
          const $itemInputEl = $inputEl.parents(".item-input");
          if (inst && (!inst.getValue() || inst.getValue().length == 0)) {
            const validationMessage =
              $inputEl.dataset().errorMessage ||
              t.validationMessage ||
              "请选择此字段。";
            let $errorEl = $inputEl.nextAll(".item-input-error-message");
            if (validationMessage) {
              if ($errorEl.length === 0) {
                $errorEl = this.$$(
                  '<div class="item-input-error-message"></div>'
                );
                $errorEl.insertAfter($inputEl);
              }
              $errorEl.text(validationMessage);
            }
            if ($errorEl.length > 0) {
              $itemInputEl.addClass("item-input-with-error-message");
            }
            $itemInputEl.addClass("item-input-invalid");
            $inputEl.addClass("input-invalid");
          } else {
            this.$$(t)
              .parents(".item-input")
              .removeClass("item-input-invalid item-input-with-error-message");
            this.$$(t).removeClass("input-invalid");
          }
        });
      }
      return this.$$($el).find(".item-input-invalid").length == 0;
    }
  },
  mounted() {
    const app = this.$f7;
    const $input = this.$$(this.$el).find("input");
    let opts = this.$util.extend({ inputEl: $input }, this.params || {});
    if (this.options && this.options.length > 0) {
      let arr = { textAlign: "center", values: [], displayValues: [] };
      this.$util.each(this.options, t => {
        if (this.$util.isString(t)) {
          arr.values.push(t);
          arr.displayValues.push(t);
        } else {
          arr.values.push(t[this.optionValue]);
          arr.displayValues.push(t[this.optionKey]);
        }
      });
      opts.cols = [arr];
    }
    if (!opts.formatValue) {
      opts.formatValue = (values, displayValues) => {
        if (this.displayValue) {
          return displayValues;
        } else {
          return values;
        }
      };
    }
    this.picker = app.picker.create(opts);
    this.picker.on("change", (picker, value, displayValue) => {
      this.$emit("input", value.join(" "));
      this.$emit("change", value, displayValue);
      if (this.required) {
        this.validatePicker();
      }
    });
    this.picker.on("closed", (picker, value, displayValue) => {
      if (this.picker.getValue() != this.lastValue) {
        this.$emit("submit", this.picker.getValue()[0]);
        this.lastValue = this.picker.getValue();
      }
    });
    $input[0].f7Picker = this.picker;
    if (this.value != undefined && this.picker.getValue() != this.value) {
      this.picker.setValue(this.$util.buildArray(this.value));
      this.lastValue = this.value;
    }
  },
  beforeDestroy() {
    this.picker.destroy();
  }
};
</script>
<style scoped>
.form-right .f7-picker >>> input[type="text"] {
  padding-right: 30px;
}
</style>

